<div id="container" class="span9 paddingnone" style="margin-top: 0px;">
    <div id="innerContainer">
        <div class="form-title">
            <span data-trans="sim_messages"></span> <span id="simSmsCapability"></span>
        </div>
        <div class="row">
            <div class="col-xs-10">
                <div id="simMsglist-main">
                    <form id="simMsgListForm">
                        <div class="simMsgList-btns smslist-btns">
                            <div class="row">
                                <div class="col-xs-6">
                                    <input type="button" id="simMsgList-delete" onclick="deleteSelectedSimMsgClickHandler()" class="btn-1" disabled="disabled" data-trans="delete" />
                                </div>
                                <div class="col-xs-6 text-right" style="display:none">
                                    <div class="row">
                                        <div class='ko-grid-search'>
                                            <img src='./img/search.png'>
                                            <input type='text' id='searchInput' class='ko-grid-search-txt-default width102 noDefaultFocus form-control' autocomplete='off' data-trans='search' onclick="searchTextClick()" maxlength="20" />
                                            <img id="clearSearchKey" class='cursor-pointer' src='./img/delete.png' onclick="clearSearchKey()" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="width100p overflow-only-y" id="simMsgTableContainer">
                            <table class="table table-striped table-hover ko-grid table-fixed">
                                <thead>
                                    <tr style="background:none">
                                        <th width="20" class="text-center">
                                            <p class="checkbox checkboxToggle" target="simMsgList_container" id="simMsgList-checkAll">
                                                <input type="checkbox" id="checkbox-all" />
                                            </p>
                                        </th>
                                        <th data-trans="phone_number" class="text-center"></th>
                                        <th data-trans="content" class="text-center"></th>
                                        <!-- <th width="100" data-trans="time" class="text-center"></th> -->
                                    </tr>
                                </thead>
                                <tbody id="simMsgList_container">
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/x-jquery-tmpl" id="simMsgListTmpl">
        {{each(i, sms) data }}
        <tr class="smslist-item simMsgList-item-class-${id} ${tag == " 1 " ? 'font-weight-bold':''}" id="simMsgList-item-${itemId}">
            <td>
                <div class="smslist-item-checkbox">
                    <p class="checkbox" id="${id}">
                        <input type="checkbox" target="simMsgList-checkAll" name="msgId" id="checkbox${id}" value="${id}" number="${number}" number="${number}" />
                    </p>
                </div>
            </td>
            <td>
                {{if name.length == 0}} {{if number.length > 13}}
                <div class="smslist-item-name pull-left">${number.substring(0,13)+"..."}</div>
                {{else}}
                <div class="smslist-item-name pull-left">${number}</div>
                {{/if}} {{else}} {{if name.length > 11}}
                <div class="smslist-item-name pull-left">${name.substring(0,11)+"..."}</div>
                {{else}}
                <div class="smslist-item-name pull-left">${name}</div>
                {{/if}} {{/if}}
            </td>
            <td class="cursorhand" title="${content}" onclick="simsmsItemClickHandler('${tag}','${id}','${itemId}')">
                <div class="sms-table-content smslist-item-msg">${content}</div>
            </td>
        </tr>
        {{/each}}
    </script>

</div>

<script type="text/javascript">
    $(function() {

        var config = window._service.config;
        var service = window._service;

        var simMsgListTmpl = null;
        /**
         * 每页记录条数
         * 现在9x15平台不能够设置每页数据个数，默认为10个。目前此变量不能够修改
         * @attribute {Integer} perPage
         */
        var perPage = 200;

        /**
         * 获取短信分页记录
         * @method getSMSMessages
         */
        function getSMSMessages() {
            return service.getSMSMessages({
                page: 0,
                smsCount: perPage,
                nMessageStoreType: 0,
                tags: 10,
                orderBy: "order by id desc"
            }, function(data) {
                tryToDisableCheckAll($("#simMsgList-checkAll"), data.messages.length);
                dealPhoneBooks(data.messages);
            }, function(data) {
                dealPhoneBooks([]);
            });
        }

        /**
         * 短信显示联系人名字，并将结果显示在UI
         * @method dealPhoneBooks
         * @param {Array} messages 短信息
         */
        function dealPhoneBooks(messages) {
            $.each(messages, function(j, n) {
                n.itemId = getLastNumber(n.number, config.SMS_MATCH_LENGTH);
                for (var i = 0; i < config.phonebook.length; i++) {
                    var person = config.phonebook[i];
                    if (n.itemId == getLastNumber(person.pbm_number, config.SMS_MATCH_LENGTH)) {
                        n.name = person.pbm_name;
                        break;
                    }
                }
            });
            renderSimMessageList(messages);
        }

        /**
         * 清楚短信列表内容
         * @method cleanSmsList
         */
        cleanSimSmsList = function() {
            $("#simMsgList_container").empty();
        };

        /**
         * 将短信显示结果显示在UI
         * @method renderSimMessageList
         * @param {Array} messages 短信息
         */
        function renderSimMessageList(messages) {
            if (simMsgListTmpl == null) {
                simMsgListTmpl = $.template("simMsgListTmpl", $("#simMsgListTmpl"));
            }
            cleanSimSmsList();

            $("#simMsgList_container").html($.tmpl("simMsgListTmpl", {
                data: messages
            }));
            hideLoading();
        }

        /**
         * 初始化电话本信息
         * @method initPhoneBooks
         * @param {Function} cb 回调函数
         */
        function initPhoneBooks(cb) {
            service.getPhoneBooks({
                page: 0,
                data_per_page: 2000,
                orderBy: "name",
                isAsc: true
            }, function(books) {
                if ($.isArray(books.pbm_data) && books.pbm_data.length > 0) {
                    config.phonebook = books.pbm_data;
                } else {
                    config.phonebook = [];
                }
                cb();
            }, function() {
                errorOverlay();
            });
        }

        /**
         * SmsMessagesVM
         * @class SmsMessagesVM
         */
        function SmsMessagesVM() {
            var self = this;
            start();
        }

        /**
         * 短信删除事件处理
         * @event deleteSmsMsgClickHandler
         */
        deleteSelectedSimMsgClickHandler = function() {
            var checkbox = $("input[name=msgId]:checked", "#simMsgList_container");
            var msgIds = [];
            for (var i = 0; i < checkbox.length; i++) {
                msgIds.push($(checkbox[i]).val());
            }
            if (msgIds.length == 0) {
                return false;
            }

            showConfirm("", "confirm_sms_delete", function() {
                showLoading('deleting');
                service.deleteMessage({
                    ids: msgIds
                }, function(data) {
                    removeChecked("simMsgList-checkAll");
                    disableBtn($("#simMsgList-delete"));
                    var idsForDelete = "";
                    checkbox.each(function(i, n) {
                        idsForDelete += ".simMsgList-item-class-" + $(n).val() + ",";
                    });
                    if (idsForDelete.length > 0) {
                        $(idsForDelete.substring(0, idsForDelete.length - 1)).hide().remove();
                    }
                    tryToDisableCheckAll($("#simMsgList-checkAll"), $(".smslist-item", "#simMsgList_container").length);
                    successOverlay();
                }, function(error) {
                    errorOverlay(error.errorText);
                });
                //删除短信后需要刷新列表
                updateSimSmsCapabilityStatus($("#simSmsCapability"));
            });
        };
        /**
         * 将被checked的条目添加到self.checkedItem中，用于在滚动还原checkbox
         * @event checkboxClickHandler
         */
        function checkboxClickHandler() {
            if (getSelectedItemSize() == 0) {
                disableBtn($("#simMsgList-delete"));
            } else {
                enableBtn($("#simMsgList-delete"));
            }
        }

        /**
         * 获取已选择的条目
         * @method getSelectedItemSize
         * @return {Array}
         */
        function getSelectedItemSize() {
            return $("input:checkbox:checked", '#simMsgList_container').length;
        }

        /**
         * 模块开始，检查电话本及短信状态并加装页码数据
         * @method start
         */
        function start() {
            showLoading('waiting');
            var getSMSReady = function() {
                service.getSMSReady({}, function(data) {
                    if (data.sms_cmd_status_result == "2") {
                        hideLoading();
                        showAlert("sms_init_fail");
                    } else if (data.sms_cmd_status_result == "1") {
                        addTimeout(function() {
                            getSMSReady();
                        }, 1000);
                    } else {
                        if (!config.HAS_PHONEBOOK) {
                            initSMSList(config.HAS_PHONEBOOK);
                        } else {
                            getPhoneBookReady();
                        }
                    }
                });
            };

            var getPhoneBookReady = function() {
                service.getPhoneBookReady({}, function(data) {
                    if (data.pbm_init_flag == "6") {
                        initSMSList(false);
                    } else if (data.pbm_init_flag != "0") {
                        addTimeout(function() {
                            getPhoneBookReady();
                        }, 1000);
                    } else {
                        initSMSList(config.HAS_PHONEBOOK);
                    }
                });
            };

            var initSMSList = function(isPbmInitOK) {
                if (isPbmInitOK) {
                    initPhoneBooks(function() {
                        getSMSMessages();
                    });
                } else {
                    config.phonebook = [];
                    getSMSMessages();
                }
            };
            getSMSReady();
            initSimSmsCapability();
        }

        /**
         * 初始化短信容量状态
         * @method initSimSmsCapability
         */
        function initSimSmsCapability() {
            var capabilityContainer = $("#simSmsCapability");
            updateSimSmsCapabilityStatus(capabilityContainer);
            addInterval(function() {
                updateSimSmsCapabilityStatus(capabilityContainer);
            }, 5000);
        }

        /**
         * 更新短信容量状态
         * @method updateSimSmsCapabilityStatus
         * @param capabilityContainer {Object} 放置容量信息的容器
         */
        function updateSimSmsCapabilityStatus(capabilityContainer) {
            service.getSmsCapability({}, function(capability) {
                if (capabilityContainer != null) {
                    capabilityContainer.text("(" + capability.simUsed + "/" + capability.simTotal + ")");
                }
            });
        }

        /**
         * 清除搜索关键字事件
         * @event clearSearchKey
         */
        clearSearchKey = function() {
            updateSearchValue($.i18n.prop("search"));
            $("#searchInput").addClass("ko-grid-search-txt-default").attr("data-trans", "search");
        };
        /**
         * 点击搜索输入框事件
         * @event searchTextClick
         */
        searchTextClick = function() {
            var searchText = $("#searchInput");
            if (searchText.hasClass("ko-grid-search-txt-default")) {
                updateSearchValue("");
                searchText.val("");
                searchText.removeClass("ko-grid-search-txt-default").removeAttr("data-trans");
            }
        };
        /**
         * 离开搜索输入框事件
         * @event searchTextBlur
         */
        searchTextBlur = function() {
            var txt = $.trim($("#searchInput").val()).toLowerCase();
            if (txt == "") {
                clearSearchKey();
            }
        };

        updateSearchValue = function(key) {
            if (key == "" || key == $.i18n.prop("search")) {
                return true;
            }
            searchTable(key);
        }

        function searchTable(key) {
            key = $.trim(key);
            var $trs = $('tr', '#smslist-table'),
                trLength = $trs.length;
            if (key == '') {
                $trs.show();
                return false;
            }
            $trs.hide();
            while (trLength) {
                var $tr = $($trs[trLength - 1]),
                    $tds = $('td', $tr),
                    tdLength = $tds.length;
                while (tdLength - 1) {
                    var $td = $($tds[tdLength - 1]);
                    if ($td.text().toLowerCase().indexOf(key.toLowerCase()) != -1) {
                        $tr.show();
                        break;
                    }
                    tdLength--;
                }
                trLength--;
            }

            addTimeout(function() {
                $(":checkbox:checked", "#addPhonebookContainer").removeAttr('checked');
                vm.selectedItemIds([]);
                vm.freshStatus($.now());
                renderCheckbox();
            }, 300);
            return true;
        }

        /**
         * 点击短信列表条目
         * @event smsItemClickHandler
         * @param {Integer} tag 未读状态 id 序号，num 手机号
         */
        simsmsItemClickHandler = function(tag, id, num) {
            if (tag == "1") {
                var ids = [];
                ids.push(id);
                service.setSmsRead({
                    ids: ids
                }, function(data) {
                    if (data.result) {
                        $(".simMsgList-item-class-" + id, "#simMsgTableContainer").removeClass('font-weight-bold');
                    }
                });
            }
        }

        /**
         * 页面事件绑定
         * @method initEventBind
         */
        function initEventBind() {
            $(".smslist-item-msg", "#simMsgTableContainer").die().live("click", function() {
                var $this = $(this).addClass('showFullHeight');
                $('.smslist-item-msg.showFullHeight', '#simMsgTableContainer').not($this).removeClass('showFullHeight');
            });
            $("#simMsgList_container p.checkbox, #simMsgListForm #simMsgList-checkAll").die().live("click", function() {
                checkboxClickHandler();
            });
            $("#searchInput").die().live('blur', function() {
                searchTextBlur();
            }).live('keyup', function() {
                updateSearchValue($("#searchInput").val());
            });
        }

        /**
         * 模块初始化开始
         * @method init
         */
        function init() {
            var container = $('#container');
            ko.cleanNode(container[0]);
            var vm = new SmsMessagesVM();
            ko.applyBindings(vm, container[0]);
            initEventBind();
        }

        window.smsUtil = {
            changeLocationHandler: function(ele) {
                if ($(ele).val() == 'sim') {
                    window.location.hash = '#sim_messages';
                } else {
                    window.location.hash = '#sms';
                }
            }
        };

        init();
        $('#container').translate();
    });
</script>
<style>
    .sms-table-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 250px;
    }
    
    .showFullHeight {
        white-space: normal;
    }
    
    #simMsgList_container td {
        vertical-align: middle;
        line-height: 1.2;
    }
    
    .smslist-item-msg {
        max-height: none;
    }
    
    .smslist-item-checkbox {
        float: none;
        width: inherit;
    }
</style>